import * as React from 'react';
import produce from 'immer'
import { IComponent, IComponentType } from '../src/interfaces';
import {createInformationFunc} from "../src/utils";
import {func} from "prop-types";
import {Dispatch} from "react";

export const widgets: IComponent[] = [
  /*{
    name: 'Card',
    type: IComponentType.DRAG,
    renderProps: {
      style: { width: 300, height: 100 }
    }
  },
  {
    name: 'Grid',
    type: IComponentType.CUSTOM,
    renderProps: {
      style: { width: 600 },
      size: 3,
      column: 3
    }
  },
  {
    name: 'ITEM',
    type: IComponentType.DROP,
  },
  {
    name: 'Heading',
    type: IComponentType.DRAG,
  },
  {
    name: 'Test',
    type: IComponentType.CUSTOM,
    children: [
      {
        name: 'Card',
        type: IComponentType.DRAG
      },
      {
        name: 'ITEM',
        type: IComponentType.DROP,
        children: []
      },
    ],
    renderProps: {
      style: { width: 300, height: 100 }
    }
  }*/
];

export type Information = {
  path: any[],
  data: IComponent
}

export const originalState: IComponent = {
  name: 'builder-editor',
  type: IComponentType.DRAG,
  path: 'root',
  renderProps: {
    id: 'builder-editor',
    style: {},
    info: [],
  },
  children: [
    {
      id: 'vv-xx-vv',
      name: 'CARD',
      // type: IComponentType.DRAG,
      children: [
        {
          name: 'Grid-Item',
          type: IComponentType.DROP,
          renderProps: {
            style: { width: 200, height: 100, position: 'relative' }
          },
        },
        {
          name: 'Grid-Item',
          type: IComponentType.DROP,
          renderProps: {
            style: { width: 200, height: 100, position: 'relative' }
          },
        }
      ],
      renderProps: {
        // name: '自定义组件',
        style: { width: 400, height: 200 }
      },
    },
    {
      id: 'vv-xx-oo',
      name: 'CARD',
      // type: IComponentType.DRAG,
      children: [
        {
          name: 'Grid-Item',
          type: IComponentType.DROP,
          renderProps: {
            style: { width: 200, height: 100 }
          },
        }
      ],
      renderProps: {
        // name: '自定义组件',
        style: { width: 400, height: 200, position: 'absolute', left: 40, top: 100 }
      },
    },
  ]
};

interface IReducerStateParams {
  value: any; field: string; path: string
}
function reducerState(state: IComponent, { value, field, path }: IReducerStateParams): IComponent {
  if (typeof path !== 'string') return
  const __path = path.split('-');
  console.log('nextState:before', { value, field, path }, __path)
  const nextState: IComponent = produce(state, (draft: IComponent[]) => {
    const func = createInformationFunc(__path as any);
    func(draft, (data: any) => {
      if (data) {
        if(field.indexOf('.') > -1) {
          try {
            const execFunc = new Function('data', 'path', 'val', `data.${field} = val`)
            execFunc(data.renderProps, field, value)
          } catch (e) {
            console.error(`“${field}” 在 renderProps 上找不到，无法赋值，请检查代码！\r\n`, e)
          }
        } else {
          data.renderProps[field] = value
        }
      }

      return data
    })
  });

  console.log('nextState:after', nextState)
  return nextState || state
}

export function useStateReducer() {
  const [state, dispatch] = React.useReducer<any>(reducerState, originalState)

  return [state, dispatch]
}

let informationDefault: Information // = originalState.children[0] as Information;
function reducerInfo(state: Information[], action: any) {
  return action || state
}

export function useInformationReducer<T>(defData: IComponent[]): [T, any] {
  const [information, dispatch] = React.useReducer<any>(reducerInfo, informationDefault || defData)

  return [information as T, dispatch]
}